<template>
    <div class="add-store">
        <!-- 导航栏 -->
        <tz-breadcrumb  :pathArr='[{"name": "商家"},{"name": "支付通道实例", "url": ""},{"name": "添加网商银行配置", "url": "/addBankSet"}]'></tz-breadcrumb>
        <!-- 表单 -->
        <div   v-loading="loadingAll">
        <el-form :inline="true" :model="formInline" class="form text-center" label-position="left" label-width="120px" >
          <!-- 步骤条 -->
          <el-steps :active="stepsActive" align-center>
            <el-step title="基本信息"></el-step>
            <el-step title="资料上传"></el-step>
            <el-step title="成功"></el-step>
          </el-steps>
          <!-- 账户信息 -->
          <div class="step1 step text-left" v-show="stepsActive == 1">
            <!-- <div class="step-title">注册管理员帐号</div> -->
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="绑定商户" class="form-item">
                <el-select
                  v-model="formInline.StoreCode"
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入关键词"
                  :remote-method="getStoreCodeList"
                  :loading="loading">
                  <el-option
                    v-for="item in bStoreCodeList"
                    :key="item.store_code"
                    :label="item.store_name"
                    :value="item.store_code">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户名称" class="form-item">
                <el-input v-model="formInline.MerchantName" placeholder="请输入您的商户名称" ></el-input>
              </el-form-item>
            </div>
             <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户简称" class="form-item">
                <el-input v-model="formInline.MerchantDetail.Alias" placeholder="请输入您的商户简称" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户类型" class="form-item">
                <el-select v-model="formInline.MerchantType" placeholder="请选择 商户类型" @change="selectMerchantType">
                  <el-option v-for="item in storetypelist" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"  > </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder"  v-show="BussAuthNumShow == false">
              <span class="starFill" >*</span>
              <el-form-item label="性别" class="form-item">
                    <el-radio v-model="formInline.MerchantDetail.PersonSex" label="M"  >男</el-radio>
                    <el-radio v-model="formInline.MerchantDetail.PersonSex" label="F" >女</el-radio>
              </el-form-item>
            </div>
            <div class="formLineBorder"  v-show="BussAuthNumShow == false">
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="职业" class="form-item">
                    <el-input v-model="formInline.MerchantDetail.PersonProfession" placeholder="请输入您的职业" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder"  v-show="BussAuthNumShow == false">
              <span class="starFill" >*</span>
              <el-form-item label="身份证有效期限" class="form-item">
                        <el-date-picker
                          v-model="formInline.MerchantDetail.PersonCertVld"
                          type="date"
                          value-format = "yyyy-MM-dd"
                          placeholder="请选择自然人身份证有效期限" >
                        </el-date-picker>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户经营类型" class="form-item">
                <el-select v-model="formInline.DealType" placeholder="请选择 商户经营类型">
                  <el-option v-for="item in storeBosstypelist" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
             <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="经营类目" class="form-item">
                <el-select v-model="formInline.Mcc" placeholder="请选择 经营类目">
                  <el-option v-for="item in mccList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="当天到账" class="form-item">
                    <el-radio v-model="formInline.SupportPrepayment" label="Y" @change="BalanceAccountClick('Y')" :disabled="todayAccount">支持</el-radio>
                    <el-radio v-model="formInline.SupportPrepayment" label="N" @change="BalanceAccountClick('N')">不支持</el-radio>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="结算方式" class="form-item">
                <el-select v-model="formInline.SettleMode" placeholder="请选择 结算方式" :disabled = "selectSettleMode" @change="selectMerchantType">
                  <el-option v-for="item in BalanceAccountWayList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="交易类型" class="form-item">
                <el-checkbox-group v-model="aTradeTypeList" :min = '1'>
                  <el-checkbox label="01">正扫交易</el-checkbox>
                  <el-checkbox label="02">反扫交易</el-checkbox>
                  <el-checkbox label="06">退款交易</el-checkbox>
                  <el-checkbox label="08">动态订单扫码</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="支付渠道" class="form-item">
                <el-checkbox-group v-model="aPayChannelList" disabled>
                  <el-checkbox label="01" >支付宝</el-checkbox>
                  <el-checkbox label="02" >微信支付</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="禁用支付方式" class="form-item">
                <el-checkbox-group v-model="aDeniedPayToolList">
                  <el-checkbox label="02" >信用卡</el-checkbox>
                  <el-checkbox label="03" >花呗（仅支付宝）</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="花呗分期" class="form-item">
                    <el-radio v-model="formInline.SupportStage" label="Y" >支持</el-radio>
                    <el-radio v-model="formInline.SupportStage" label="N" >不支持</el-radio>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="微信公众号类型" class="form-item">
                <el-select  v-model="formInline.PartnerType" placeholder="请选择 微信公众号类型" @change="selectWeixinType">
                  <el-option v-for="item in partnerTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "SubscribeAppIdShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="公众号APPID" class="form-item">
                <el-input class="bigerInput" v-model="formInline.MerchantDetail.SubscribeAppId" placeholder="请输入需关注的公众号对应的APPID"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="支付宝费率版本" class="form-item">
                <el-select  v-model="formInline.RateVersion" placeholder="请选择 支付宝费率版本">
                  <el-option v-for="item in rateVersionList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="联系人手机号" class="form-item">
                <el-input v-model="formInline.MerchantDetail.ContactMobile" placeholder="请输入您的联系人手机号" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="联系人姓名" class="form-item">
                <el-input v-model="formInline.MerchantDetail.ContactName" placeholder="请输入您的联系人姓名" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户地址" class="form-item">
                <!-- <el-cascader :options="options" @change="cityChange" :props='props' expand-trigger="hover"  v-model="contactAdress"></el-cascader> -->
                <el-cascader :options="options" class="bigerInput"   :props='props' expand-trigger="hover" v-model="contactAdress"></el-cascader>
                <el-input class="small-input" v-model="formInline.MerchantDetail.Address" placeholder="请输入您的详细地址"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="商户客服电话" class="form-item">
                <el-input v-model="formInline.MerchantDetail.ServicePhoneNo" placeholder="请输入商户客服电话" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="电子邮箱" class="form-item">
                <el-input v-model="formInline.MerchantDetail.Email" placeholder="请输入电子邮箱" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "LegalPersonShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="企业法人名称" class="form-item">
                <el-input v-model="formInline.MerchantDetail.LegalPerson" placeholder="请输入企业法人名称"></el-input>
              </el-form-item>
            </div>
             <div class="formLineBorder" >
              <span class="starFill" v-show="needFill === true">*</span>
              <el-form-item label="负责人手机号" class="form-item">
                <el-input v-model="formInline.MerchantDetail.PrincipalMobile" placeholder="请输入负责人手机号" ></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="yanzhengma === true">
              <span class="starFill" >*</span>
              <el-form-item label="验证码" class="form-item">
                <el-input placeholder="请输入验证码" v-model="formInline.AuthCode"  clearable>
                      <template slot="append">
                        <input type="button" class=" btn btn-no-bg"  v-bind:disabled="SMSSendClick" v-model="txtusersend" />
                        <div class="img-path send-btn" v-on:click="getCode"></div>
                      </template>
                </el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="负责人证件类型" class="form-item">
                <el-select  v-model="formInline.MerchantDetail.PrincipalCertType" placeholder="请选择 负责人证件类型">
                  <el-option v-for="item in principalCertTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="负责人证件号码" class="form-item">
                <el-input v-model="formInline.MerchantDetail.PrincipalCertNo" placeholder="请输入负责人证件号码"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="负责人名称" class="form-item">
                <el-input v-model="formInline.MerchantDetail.PrincipalPerson" placeholder="请输入负责人名称"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="身份证件有效期" class="form-item" >
                <el-date-picker
                v-model="formInline.MerchantDetail.PrincipalCertVld"
                type="date"
                value-format = "yyyy-MM-dd"
                class="bigerInpur"
                placeholder="请选择负责人身份证有效期">
              </el-date-picker>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="控股股东身份证号" class="form-item">
                <el-input v-model="formInline.MerchantDetail.ShareholderCertNo" placeholder="请输入控股股东身份证号"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="控股股东姓名" class="form-item">
                <el-input v-model="formInline.MerchantDetail.ShareholderName" placeholder="请输入控股股东/实际控制人姓名"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="身份证件有效期" class="form-item" >
                <el-date-picker
                v-model="formInline.MerchantDetail.ShareholderCertVld"
                type="date"
                value-format = "yyyy-MM-dd"
                class="bigerInpur"
                placeholder="请选择控股股东身份证有效期">
              </el-date-picker>
              </el-form-item>
            </div>
            
          </div>
          <!-- 商户信息 -->
          <div class="step1 step text-left" v-show="stepsActive == 2">
            <!-- <div class="step-title">商户信息</div> -->
            <el-row class="rows">
                <el-col :span="6" class="mb20">
                    <div class="images">
                        <img :src="showImg + img1" class="imgshow" v-if="img1 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img1 == ''">
                        <p v-if="img1 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img1','01')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">负责人身份证(正面)</p>
                </el-col>
                <el-col :span="6" class="mb20">
                    <div class="images">
                        <img :src="showImg + img2" class="imgshow" v-if="img2 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img2 == ''">
                        <p v-if="img2 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img2','02')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">负责人身份证(反面)</p>
                </el-col>
                <el-col :span="6" v-show = "BussAuthNumShow == true" class="mb20">
                    <div class="images">
                        <img :src="showImg + img3" class="imgshow" v-if="img3 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img3 == ''">
                        <p v-if="img3 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img3','03')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">营业执照图片</p>
                </el-col>
                <el-col :span="6" class="mb20" v-show = "BussAuthNumShow == true">
                    <div class="images">
                        <img :src="showImg + img4" class="imgshow" v-if="img4 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img4 == ''">
                        <p v-if="img4 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img4','04')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">组织机构代码证图片</p>
                </el-col>
                <el-col :span="6" v-show = "BussAuthNumShow == true" class="mb20">
                    <div class="images">
                        <img :src="showImg + img5" class="imgshow" v-if="img5 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img5 == ''">
                        <p v-if="img5 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img5','05')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">开户许可证照片</p>
                </el-col>
                <el-col :span="6" class="mb20">
                    <div class="images">
                        <img :src="showImg + img6" class="imgshow" v-if="img6 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img6 == ''">
                        <p v-if="img6 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img6','06')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">门头照</p>
                </el-col>
                 <el-col :span="6" class="mb20">
                    <div class="images">
                        <img :src="showImg + img7" class="imgshow" v-if="img7 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img7 == ''">
                        <p v-if="img7 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img7','07')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">其他图片</p>
                </el-col>
                <el-col :span="6" class="mb20" >
                    <div class="images">
                        <img :src="showImg + img8" class="imgshow" v-if="img8 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img8 == ''">
                        <p v-if="img8 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img8','08')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">收银台照片</p>
                </el-col>
                <el-col :span="6" class="mb20" v-show="BussAuthNumShow == true">
                    <div class="images">
                        <img :src="showImg + img9" class="imgshow" v-if="img9 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img9 == ''">
                        <p v-if="img9 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img9','09')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">门店内景照片</p>
                </el-col>
                <el-col :span="6" class="mb20" >
                    <div class="images">
                        <img :src="showImg + img11" class="imgshow" v-if="img11 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img11 == ''">
                        <p v-if="img11 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img11','11')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">手持身份证照片</p>
                </el-col>
                <el-col :span="6" class="mb20" v-show="BussAuthNumShow == false">
                    <div class="images">
                        <img :src="showImg + img12" class="imgshow" v-if="img12 != ''"/>
                        <img src="./../../public/img/add.png" class="addimg" v-if="img12 == ''">
                        <p v-if="img12 == ''">添加证照</p>
                        <input type="file" name=""  class="avatar-uploader" @change="fileChange($event,'img12','12')" >
                    </div>
                    <p class="text-center text-contain" style="width:122px">租赁协议照片</p>
                </el-col>
            </el-row>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="工商注册号" class="form-item">
                <el-input v-model="formInline.MerchantDetail.BussAuthNum" placeholder="请输入营业执照工商注册号"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="税务登记证号码" class="form-item">
                <el-input v-model="formInline.MerchantDetail.TaxNum" placeholder="请输入税务登记证号码"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show = "BussAuthNumShow == true">
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="营业执照有效期" class="form-item" >
                <el-date-picker
                v-model="formInline.MerchantDetail.BussAuthVld"
                type="date"
                value-format = "yyyy-MM-dd"
                class="bigerInpur"
                placeholder="请选择营业执照有效期">
              </el-date-picker>
              </el-form-item>
            </div>
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="渠道类型" class="form-item">
                  <el-checkbox-group v-model="aChannelType" :min="1"  @change="channelTypeClick" disabled>
                    <el-checkbox label="01">支付宝</el-checkbox>
                    <el-checkbox label="02">微信支付</el-checkbox>
                  </el-checkbox-group>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="alipayFee == true">
              <span class="starFill" >*</span>
              <el-form-item label="支付宝费用类型" class="form-item">
                <el-select  v-model="formInline.FeeParamList[0].FeeType" placeholder="请选择 支付宝费用类型">
                  <el-option v-for="item in feeTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="alipayFee == true">
              <span class="starFill" >*</span>
              <el-form-item label="支付宝费率" class="form-item">
                <span>千分之</span><el-input class="xsInput" v-model="FeeValueAlipay" placeholder="如4.00或4"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="weixinFee == true">
              <span class="starFill" >*</span>
              <el-form-item label="微信费用类型" class="form-item">
                <el-select  v-model="formInline.FeeParamList[1].FeeType" placeholder="请选择微信费用类型">
                  <el-option v-for="item in feeTypeList"   :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="weixinFee == true">
              <span class="starFill" >*</span>
              <el-form-item label="微信费率" class="form-item">
                <span>千分之</span><el-input class="xsInput" v-model="FeeValueWeixin" placeholder="如4.00或4"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="银行卡号" class="form-item">
                <el-input v-model="formInline.BankCardParam.BankCardNo" placeholder="请输入银行卡号"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder"  v-show = "bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="银行账户户名" class="form-item">
                <el-input v-model="formInline.BankCardParam.BankCertName" placeholder="请输入银行账户户名"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder"   v-show = "bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="账户类型" class="form-item">
                <el-select  v-model="formInline.BankCardParam.AccountType" placeholder="请选择账户类型">
                  <el-option v-for="item in accountTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type" :disabled="item.disabled"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <div class="formLineBorder" v-show = "bankCardShow == true"> -->
            <div class="formLineBorder" >
              <span class="starFill" >*</span>
              <el-form-item label="开户支行名称" class="form-item">
                <el-autocomplete class="bigerInput"  :fetch-suggestions="querySearchAsync" placeholder="请输入内容" v-model="state4"  @select="handleSelect"></el-autocomplete>
                <!-- <el-input v-model="formInline.BankCardParam.ContactLine" placeholder="请输入支行名称"></el-input> -->
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="持卡人证件类型" class="form-item">
                <el-select  v-model="formInline.BankCardParam.CertType" placeholder="请选择 持卡人证件类型">
                  <el-option v-for="item in principalCertTypeList" :key="item.store_type" :label="item.store_type_desc" :value="item.store_type"> </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="持卡人证件号码" class="form-item">
                <el-input v-model="formInline.BankCardParam.CertNo" placeholder="请输入持卡人证件号码"></el-input>
              </el-form-item>
            </div>
            <div class="formLineBorder" v-show="cardType == true && bankCardShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="持卡人地址" class="form-item">
                <el-input v-model="formInline.BankCardParam.CardHolderAddress" placeholder="请输入持卡人证件号码"></el-input>
              </el-form-item>
            </div>
             <div class="formLineBorder" v-show="bankCardContainShow == true">
              <span class="starFill" >*</span>
              <el-form-item label="开户支行所在" class="form-item">
                <el-cascader :options="options" class="bigerInput"  :props='props' expand-trigger="hover" v-model="bankPcity"></el-cascader>
              </el-form-item>
            </div>
            <div class="formLineBorder">
              <!-- <span class="starFill" >*</span> -->
              <el-form-item label="商户推荐方pid" class="form-item">
                <el-input v-model="formInline.AlipaySource" placeholder="请输入商户推荐方pid"></el-input>
              </el-form-item>
            </div>
          </div> 
          <div class="step1 step text-center" v-show="stepsActive == 3">添加成功，请点击完成完成按钮完成配置</div>
          <!-- 横线 -->
          <div class="line"></div>
          <el-row class="next-btn">
            <el-button plain @click="back">返回</el-button>
            <el-button type="primary" @click="next">{{stepsActive == 3 ? '完成' : '下一步'}}</el-button>
          </el-row>
        </el-form>
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
// import CityList from './../../api/city';
import cityCode from './../../api/citycode';
export default {
  mounted: function () {
    let that = this;
    // 获取默认商户列表
    that.getDefaultStoreCode();
    that.formInline.StoreCode = that.$route.query.store_code;
    // 获取默认商户编码列表
    that.getDefaultContent();
    // 渠道类型默认为01
    that.formInline.FeeParamList[0].ChannelType = '01';
    // 判断数组是否包含这个元素
    if (that.aChannelType.indexOf('01') > -1) {
      that.alipayFee = true;
    } else {
      that.alipayFee = false;
    }
    if (that.aChannelType.indexOf('02') > -1) {
      that.weixinFee = true;
    } else {
      that.weixinFee = false;
    }
  },
  data () {
    return {
      state4: '',
      timeout: null,
      // 全部加载
      loadingAll: false,
      // 绑定商户列表
      bStoreCodeList: [],
      storeCodelist: {},
      // 绑定商户列表是否加载
      loading: false,
      // 当前是第几步
      stepsActive: 1,
      // 发送验证码是否可以点击fales可以点击
      SMSSendClick: false,
      // 发送验证码的文字显示
      txtusersend: '发送验证码',
      // 结算方式是否可以点击
      selectSettleMode: false,
      // 银行卡号是否显示
      bankCardShow: true,
      // 发送验证码显示框是否出现
      yanzhengma: false,
      // 当天结算是否可以点击
      todayAccount: false,
      // 手机号是否必填
      needFill: false,
      // 获取商户类型列表
      storetypelist: [{
        store_type: '01',
        store_type_desc: '自然人'
      }, {
        store_type: '02',
        store_type_desc: '个体工商户'
      }, {
        store_type: '03',
        store_type_desc: '企业商户'
      }],
      // 获取商户经营类型
      storeBosstypelist: [{
        store_type: '01',
        store_type_desc: '实体特约商户'
      }, {
        store_type: '02',
        store_type_desc: '网络特约商户'
      }, {
        store_type: '03',
        store_type_desc: '实体兼网络特约商户'
      }],
      // 结算方式列表
      BalanceAccountWayList: [{
        store_type: '01',
        store_type_desc: '结算到他行卡',
        disabled: false
      }, {
        store_type: '02',
        store_type_desc: '结算到余利宝',
        disabled: true
      }],
      // 经营类目列表
      mccList: [{
        store_type: '2015050700000000',
        store_type_desc: '美食'
      }, {
        store_type: '2015091000052157',
        store_type_desc: '超市便利店'
      }, {
        store_type: '2015062600004525',
        store_type_desc: '休闲娱乐'
      }, {
        store_type: '2015062600002758',
        store_type_desc: '购物'
      }, {
        store_type: '2016062900190124',
        store_type_desc: '爱车'
      }, {
        store_type: '2015063000020189',
        store_type_desc: '生活服务'
      }, {
        store_type: '2016042200000148',
        store_type_desc: '教育培训'
      }, {
        store_type: '2016062900190296',
        store_type_desc: '医疗健康'
      }, {
        store_type: '2015080600000001',
        store_type_desc: '航旅'
      }, {
        store_type: '2016062900190337',
        store_type_desc: '专业销售/批发'
      }, {
        store_type: '2016062900190371',
        store_type_desc: '政府/社会组织'
      }],
      // 微信公众号类型列表
      partnerTypeList: [{
        store_type: '01',
        store_type_desc: '商户自有公众号。'
      }, {
        store_type: '03',
        store_type_desc: '合作机构对接网商时留存的公众号。'
      }],
      // 支付宝费率列表
      rateVersionList: [{
        store_type: 'RS',
        store_type_desc: '标准费率'
      }, {
        store_type: 'R0',
        store_type_desc: '0费率'
      }, {
        store_type: 'R1',
        store_type_desc: '千一费率'
      }],
      // 负责人证件类型列表
      principalCertTypeList: [{
        store_type: '01',
        store_type_desc: '身份证'
      }],
      // 费用类型列表
      feeTypeList: [{
        store_type: '01',
        store_type_desc: 't0收单手续费',
        disabled: true
      }, {
        store_type: '02',
        store_type_desc: 't1收单手续费',
        disabled: false
      }],
      // 账户类型
      accountTypeList: [{
        store_type: '01',
        store_type_desc: '对私账户',
        disabled: false
      }, {
        store_type: '02',
        store_type_desc: '对公账户',
        disabled: true
      }],
      // 显示图片的地址
      imgUrl: '',
      // 交易类型选中的数组
      aTradeTypeList: ['01', '02', '06', '08'],
      // 支付渠道选中的数组
      aPayChannelList: ['01', '02'],
      // 禁用支付方式
      aDeniedPayToolList: [],
      // 渠道类型数组
      aChannelType: ['01', '02'],
      // 支付宝费率是否显示
      alipayFee: true,
      // 微信费率是否显示
      weixinFee: true,
      // 持卡人证件类型是否显示
      cardType: true,
      // 商户地址
      contactAdress: [],
      // 企业法人是否出现
      LegalPersonShow: false,
      // 营业执照工商注册号
      BussAuthNumShow: false,
      // 微信需关注的公众号是否出现
      SubscribeAppIdShow: false,
      // 开户支行，省，区是否显示
      bankCardContainShow: false,
      // 开户行所在省市
      bankPcity: [],
      // 支付宝费率还未计算的
      FeeValueAlipay: '',
      // 微信费率还未计算的
      FeeValueWeixin: '',
      formInline: {
        // 商户推荐方PID
        AlipaySource: '',
        // 商户编码
        StoreCode: '',
        // 商户名称
        MerchantName: '',
        // 商家类型
        MerchantType: '',
        // 商户经营类型
        DealType: '',
        // 商户清算资金是否支持
        SupportPrepayment: 'N',
        // 结算方式
        SettleMode: '',
        // 经营类目
        Mcc: '',
        // 交易类型被选中的字符串
        TradeTypeList: [],
        // 支付渠道被选中的字符串
        PayChannelList: '',
        // 禁用支付方式
        DeniedPayToolList: '',
        // 微信公众号类型
        PartnerType: '03',
        // 商户详情
        MerchantDetail: {
          // 负责人手机号
          PrincipalMobile: '',
          // 商户简称
          Alias: '',
          // 联系人手机号
          ContactMobile: '',
          // 联系人姓名
          ContactName: '',
          // 商户地址
          Province: '',
          City: '',
          District: '',
          Address: '',
          // 商户客服电话
          ServicePhoneNo: '',
          // 负责人证件类型
          PrincipalCertType: '01',
          // 负责人证件号码
          PrincipalCertNo: '',
          // 负责人名称
          PrincipalPerson: '',
          // 身份证正面
          CertPhotoA: '',
          // 身份证反面
          CertPhotoB: '',
          // 营业执照图片
          LicensePhoto: '',
          // 组织机构代码证图片
          PrgPhoto: '',
          // 开户许可证照片
          IndustryLicensePhoto: '',
          // 门头照
          ShopPhoto: '',
          // 其他图片
          OtherPhoto: '',
          // 门店内景图片
          ShopEntrancePhoto: '',
          // 租赁协议图片
          ContractPhoto: '',
          // 收银台照片
          CheckstandPhoto: '',
          // 手持身份证照片
          CertPhotoC: '',
          // 邮箱
          Email: '',
          // 企业法人名称
          LegalPerson: '',
          // 营业执照工商注册号
          BussAuthNum: '',
          // 公众号appid
          SubscribeAppId: '',
          // 性别（自然人商户上送）
          PersonSex: '',
          // 职业（自然人商户上送）
          PersonProfession: '',
          // 身份证有效期限（自然人商户上送）
          PersonCertVld: '',
          // 法定代表人或负责人身份证件有效期（企业/个体工商上送）
          PrincipalCertVld: '',
          // 控股股东或者实际控制人身份证件有效期（企业/个体工商上送）
          ShareholderCertVld: '',
          // 控股股东或者实际控制人身份证件号码（企业/个体工商上送）
          ShareholderCertNo: '',
          // 控股股东或者实际控制人身份证件类型（企业/个体工商上送),
          ShareholderCertType: '01',
          // 控股股东或者实际控制人姓名（企业/个体工商上送)
          ShareholderName: '',
          // 营业执照有效期
          BussAuthVld: '',
          // 税务登记证号码
          TaxNum: ''
        },
        // 渠道
        FeeParamList: [{
          ChannelType: '',
          FeeType: '',
          FeeValue: ''
        }, {
          ChannelType: '',
          FeeType: '',
          FeeValue: ''
        }],
        // 银行卡信息
        BankCardParam: {
          // 银行卡号
          BankCardNo: '',
          // 银行账户名
          BankCertName: '',
          // 账户类型
          AccountType: '',
          // 持卡人身份类型
          CertType: '01',
          // 持卡人证件号码
          CertNo: '',
          // 持卡人地址
          CardHolderAddress: '',
          // 支行名称或者联行号
          ContactLine: '',
          // 开户支行名称
          BranchName: '',
          // 开户支行所在省
          BranchProvince: '',
          // 开户支行所在市
          BranchCity: ''
        },
        // 是否支持花呗分期
        SupportStage: 'N',
        // 支付宝费率
        RateVersion: 'RS',
        // 验证码
        AuthCode: ''
        // // 省份
        // province: '',
        // // 城市
        // city: '',
        // // 区
        // district: ''
      },
      baseUrl: api.baseUrl + api.upimg,
      imageUrl: '',
      img1: '',
      img2: '',
      img3: '',
      img4: '',
      img5: '',
      img6: '',
      img7: '',
      img8: '',
      img9: '',
      img11: '',
      img12: '',
      showImg: api.baseUrl + api.showImg,
      // token值
      token: localStorage.getItem('token'),
      // 点击获取图片的字的显示
      showImgText: true,
      options: cityCode.cityCode,
      BranchName: '',
      ContactLine: '',
      props: {
        value: 'code',
        label: 'value',
        children: 'children'
      }
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  methods: {
    // 获得默认值
    getDefaultStoreCode () {
      let that = this;
      if (that.$route.query.store_code !== '') {
        // 获取商户列表接口请求
        // 通过字段查询
        http.get(api.merchantList, {
          token: localStorage.getItem('token'),
          page: '1',
          pagesize: '10'
        }, response => {
          console.log(response);
          console.log(66);
          that.loading = false;
          if (response.code === '10001') {
            that.bStoreCodeList = response.data[0].res.data;
          }
        }, () => {
          console.log('网络错误');
        });
      }
    },
    // 查询绑定商户的列表 store_code
    getStoreCodeList (query) {
      console.log(query);
      if (query !== '') {
        let that = this;
        that.loading = true;
        // 获取商户列表接口请求
        // 通过字段查询
        http.get(api.merchantList, {
          token: localStorage.getItem('token'),
          store_name: query
        }, response => {
          console.log(response);
          console.log(66);
          that.loading = false;
          if (response.code === '10001') {
            that.storeCodelist = response.data[0].res.data;
            that.bStoreCodeList = that.storeCodelist.filter(item => {
              return item.store_name.indexOf(query) > -1;
            });
            console.log(response.data[0].res.data);
          } else {
            that.getDefaultStoreCode();
          }
        }, () => {
          console.log('网络错误');
        });
      } else {
        this.bStoreCodeList = [];
      }
    },
    // 获取对应的商户编码的内容
    getDefaultContent () {
      let that = this;
      // 获取商户列表接口请求
      http.get(api.merchantList, {
        token: localStorage.getItem('token'),
        store_code: that.$route.query.store_code
      }, response => {
        console.log(response);
        console.log(66);
        if (response.code === '10001') {
          var storeInfo = response.data[0].res.data[0];
          // 联系人姓名
          if (storeInfo.contact_name !== '') {
            that.formInline.MerchantDetail.ContactName = storeInfo.contact_name;
          }
          // 联系人邮箱
          if (storeInfo.contact_email !== '') {
            that.formInline.MerchantDetail.Email = storeInfo.contact_email;
          }
          // 联系人电话
          if (storeInfo.contact_phone !== '') {
            that.formInline.MerchantDetail.ContactMobile = storeInfo.contact_phone;
          }
          // 商户名称
          if (storeInfo.store_name !== '') {
            that.formInline.MerchantName = storeInfo.store_name;
          }
          // 商户简称
          if (storeInfo.short_name !== '') {
            that.formInline.MerchantDetail.Alias = storeInfo.short_name;
          }
          // 负责人手机号
          if (storeInfo.mobile !== '') {
            that.formInline.MerchantDetail.PrincipalMobile = storeInfo.mobile;
          }
          // 商户客服电话
          if (storeInfo.store_service_tel !== '') {
            that.formInline.MerchantDetail.ServicePhoneNo = storeInfo.store_service_tel;
          }
        } else {
          that.bStoreCodeList = [];
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误，请稍后再试');
      });
    },
    querySearchAsync (queryString, cb) {
      // 获取联行号接口
      http.get(api.getContactLine, {
        keyword: queryString
      }, response => {
        console.log(response);
        if (response.code === '10001') {
          var restaurants = response.data[0];
          // 数组循环加一个字段value等于对应的bank_name值（map根据遍历执行的匿名函数，对于原数组中的每个值产生一个对应的值，并返回一个新的数组，存在一个映射关系）
          // element input模糊搜索
          Array.from(response.data[0]).map(item => {
            item.value = item.bank_name;
          });
          var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
          cb(results);
        }
      }, (err) => {
        console.log(err);
      });
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect (item) {
      console.log(item);
      // if (this.formInline.MerchantType === '03') {
      //   // 获取对应的联行号
      //   this.formInline.BankCardParam.ContactLine = item.inst_out_code;
      //   console.log(this.formInline.BankCardParam.ContactLine);
      // } else {
      //   // 获取对应的开户支行
      //   this.formInline.BankCardParam.BranchName = item.value;
      //   console.log(this.formInline.BankCardParam.BranchName);
      // }
      let that = this;
      that.formInline.BankCardParam.BranchName = item.value;
      that.formInline.BankCardParam.ContactLine = item.inst_out_code;
      that.BranchName = item.value;
      that.ContactLine = item.inst_out_code;
      // if (this.bankCardShow === true) {
      // // 获取对应的开户支行
      //   this.formInline.BankCardParam.ContactLine = '';
      // } else {
      // // 获取对应的联行号
      //   this.formInline.BankCardParam.ContactLine = item.inst_out_code;
      // }
    },
    // 微信公众号类型选择时间
    selectWeixinType () {
      let that = this;
      if (that.formInline.PartnerType === '01') {
        that.SubscribeAppIdShow = true;
      } else {
        that.SubscribeAppIdShow = false;
      }
    },
    // 渠道类型点击事件
    channelTypeClick () {
      console.log(this.aChannelType);
      // 判断数组是否包含这个元素对应的内容显示并且赋值渠道类型，否则对应的内容清空
      if (this.aChannelType.indexOf('01') > -1) {
        this.alipayFee = true;
        this.formInline.FeeParamList[0].ChannelType = '01';
      } else {
        this.alipayFee = false;
        this.formInline.FeeParamList[0].ChannelType = '';
        this.formInline.FeeParamList[0].FeeType = '';
        this.formInline.FeeParamList[0].FeeValue = '';
      }
      if (this.aChannelType.indexOf('02') > -1) {
        this.weixinFee = true;
        this.formInline.FeeParamList[1].ChannelType = '02';
      } else {
        this.weixinFee = false;
        this.formInline.FeeParamList[1].ChannelType = '';
        this.formInline.FeeParamList[1].FeeType = '';
        this.formInline.FeeParamList[1].FeeValue = '';
      }
      // 渠道类型数组转换为字符串，逗号隔开
      // var str = this.aChannelType.join(',');
      console.log(this.formInline.FeeParamList[0].ChannelType);
      console.log(this.formInline.FeeParamList[1].ChannelType);
      // that.formInline.FeeParamList[0].ChannelType
    },
    // 商户类型
    selectMerchantType () {
      let that = this;
      console.log(that.formInline.MerchantType);
      // 如果选自然人或者个体工商户或者结算到余利宝则验证码显示，手机号为必填，否则相反
      if (that.formInline.MerchantType === '01' || that.formInline.MerchantType === '02' || that.formInline.SettleMode === '01') {
        that.yanzhengma = true;
        that.needFill = true;
      } else {
        that.yanzhengma = false;
        that.needFill = false;
      }
      if (that.formInline.MerchantType === '03') {
        that.todayAccount = true;
        that.formInline.SupportPrepayment = 'N';
      } else {
        that.todayAccount = false;
        that.formInline.SupportPrepayment = 'N';
      }
      if ((that.formInline.MerchantType === '01' && that.bankCardShow === true) || (that.formInline.MerchantType === '02' && that.bankCardShow === true)) {
        // 对私账户可以点击，对公账户不可以点击，默认选中对私账户
        that.accountTypeList[0].disabled = false;
        that.accountTypeList[1].disabled = true;
        that.formInline.BankCardParam.AccountType = '01';
        that.formInline.BankCardParam.CertType = '01';
        that.cardType = true;
        // 开户支行，省和区显示
        that.bankCardContainShow = true;
      } else if (that.bankCardShow === true && that.formInline.MerchantType === '03') {
        // 对私账户不可以点击，对公账户可以点击，默认选中对公账户
        that.accountTypeList[0].disabled = true;
        that.accountTypeList[1].disabled = false;
        that.formInline.BankCardParam.AccountType = '02';
        that.formInline.BankCardParam.CertType = '';
        that.cardType = false;
         // 开户支行，省和区隐藏
        that.bankCardContainShow = false;
      }
      if (that.formInline.MerchantType === '01' || that.formInline.MerchantType === '02') {
        // 企业法人名称填写隐藏
        that.LegalPersonShow = false;
        that.BalanceAccountWayList[1].disabled = false;
      } else {
        // 企业法人名称填写出现
        that.LegalPersonShow = true;
        that.BalanceAccountWayList[1].disabled = true;
      }
      // 如果选择自然人则隐藏营业执照工商注册号,否则显示
      if (that.formInline.MerchantType === '01') {
        that.BussAuthNumShow = false;
        that.formInline.BankCardParam.AccountType = '';
      } else {
        that.BussAuthNumShow = true;
      }
    },
    // 当天到账点击事件
    BalanceAccountClick (supportIs) {
      console.log(22);
      let that = this;
      // 如果点击支持，结算方式为结算到余利宝，结算方式不能点击
      // 如果点击不支持，结算方式可以选择，t+0不能点击
      if (supportIs === 'Y') {
        // 结算方式为结算到余利宝
        that.formInline.SettleMode = '02';
        // 银行卡隐藏
        that.bankCardShow = false;
        // 费率必填T+0
        that.formInline.FeeParamList[0].FeeType = '01';
        that.formInline.FeeParamList[1].FeeType = '01';
        that.feeTypeList[0].disabled = false;
        that.feeTypeList[1].disabled = true;
        // 清空银行卡身份证类型
        that.formInline.BankCardParam.CertType = '';
        // 结算方式不能点击
        that.selectSettleMode = true;
      } else {
        // 银行卡显示
        that.bankCardShow = true;
        // 恢复默认身份证类型
        that.formInline.BankCardParam.CertType = '01';
        // 结算方式可以选择
        that.formInline.SettleMode = '';
        // 费率必填T+1
        that.formInline.FeeParamList[1].FeeType = '02';
        that.formInline.FeeParamList[1].FeeType = '02';
        that.feeTypeList[0].disabled = true;
        that.feeTypeList[1].disabled = false;
        // 结算方式可以点击
        that.selectSettleMode = false;
      }
    },
    // 上传图片
    fileChange (event, img, photoType) {
      let that = this;
      console.log(photoType);
      console.log(img);
      var file = event.target.files;
      that.loadingAll = true;
      http.upImg(api.upimg, {
        file: file[0]
      }, response => {
        that.loadingAll = false;
        if (response.code === '10001') {
          that[img] = response.data[0].file_code;
          // 图片上传至网商银行接口对接
          http.post(api.bankImgup, {
            photo_type: photoType,
            picture: that[img]
          }, response => {
            console.log(response);
            console.log(response.msg);
            if (img === 'img1') {
              that.formInline.MerchantDetail.CertPhotoA = response.data[0].PhotoUrl;
            } else if (img === 'img2') {
              that.formInline.MerchantDetail.CertPhotoB = response.data[0].PhotoUrl;
            } else if (img === 'img3') {
              that.formInline.MerchantDetail.LicensePhoto = response.data[0].PhotoUrl;
            } else if (img === 'img4') {
              that.formInline.MerchantDetail.PrgPhoto = response.data[0].PhotoUrl;
            } else if (img === 'img5') {
              that.formInline.MerchantDetail.IndustryLicensePhoto = response.data[0].PhotoUrl;
            } else if (img === 'img6') {
              that.formInline.MerchantDetail.ShopPhoto = response.data[0].PhotoUrl;
            } else if (img === 'img7') {
              that.formInline.MerchantDetail.OtherPhoto = response.data[0].PhotoUrl;
              console.log(that.formInline.MerchantDetail.OtherPhoto);
            } else if (img === 'img9') {
              that.formInline.MerchantDetail.ShopEntrancePhoto = response.data[0].PhotoUrl;
            } else if (img === 'img8') {
              that.formInline.MerchantDetail.CheckstandPhoto = response.data[0].PhotoUrl;
            } else if (img === 'img11') {
              that.formInline.MerchantDetail.CertPhotoC = response.data[0].PhotoUrl;
            } else if (img === 'img12') {
              that.formInline.MerchantDetail.ContractPhoto = response.data[0].PhotoUrl;
            }
          }, () => {
            console.log('网络错误');
          });
        } else {
          that.loadingAll = false;
          console.log(response);
          that.$message.error(response.msg);
        }
      }, err => {
        console.log(err);
      });
    },
    next () {
      let that = this;
      console.log(that.formInline.MerchantDetail.PersonCertVld);
      // 第一步的验证
      // 验证密码至少8位，字母、数字、特殊符号（必须包含其中两个）
      // var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[\w~!@#$%^&*()_+`\-={}:";'<>?,./]{8,}$/;
      // 邮箱验证
      var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      // 工商注册号的验证
      var businessNoReg = /^(\d{15}|\d{18})$/;
      // // 手机号码格式规范
      var mobilephoneReg = /^1[34578]\d{9}$/;
      // 验证真实姓名全英文或者全中文，最少2字符英文可以带.,中文不可以
      var regRealName = /^([A-Za-z_. ]{2,20}|[\u4e00-\u9fa5]{2,20})$/;
      // 身份证验证
      var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      // 只能输入数字和小数点后最多能输入两位
      var nubReg = /^\d+\.?(\d{1,2})?$/;
      // // 银行卡号的验证，银行卡号一般15位或19位，第一位不为0的验证 /^([1-9]{1})(\d{14}|\d{18})$/
      var bankNo = /^[\d/-]+$/;
      if (that.formInline.StoreCode === '' || that.formInline.StoreCode === undefined) {
        that.$message.error('绑定商户不能为空');
        return false;
      } else if (that.formInline.MerchantName === '') {
        that.$message.error('商户名称不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.Alias === '') {
        that.$message.error('商户简称不能为空');
        return false;
      } else if (that.formInline.MerchantType === '') {
        that.$message.error('商户类型不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.PersonSex === '' & that.formInline.MerchantType === '01') {
        that.$message.error('性别不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.PersonCertVld === '' & that.formInline.MerchantType === '01') {
        that.$message.error('身份证件有效期限不能为空');
        return false;
      } else if (that.formInline.DealType === '') {
        that.$message.error('商户经营类型不能为空');
        return false;
      } else if (that.formInline.Mcc === '') {
        that.$message.error('经营类目不能为空');
        return false;
      } else if (that.formInline.SettleMode === '') {
        that.$message.error('结算方式不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.ContactMobile === '') {
        that.$message.error('联系人手机号不能为空');
        return false;
      } else if (!mobilephoneReg.test(that.formInline.MerchantDetail.ContactMobile)) {
        that.$message.error('联系人手机号格式错误');
        return false;
      } else if (that.formInline.MerchantDetail.ContactName === '') {
        that.$message.error('联系人姓名不能为空');
        return false;
      } else if (!regRealName.test(that.formInline.MerchantDetail.ContactName === '')) {
        that.$message.error('联系人姓名输入有误，请重新输入');
        return false;
      } else if (that.contactAdress === '') {
        that.$message.error('商户地址不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.Address === '') {
        that.$message.error('商户详细地址不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.ServicePhoneNo === '') {
        that.$message.error('商户客服电话不能为空');
        return false;
      } else if (!mobilephoneReg.test(that.formInline.MerchantDetail.ServicePhoneNo)) {
        that.$message.error('商户客服电话手机号格式错误');
        return false;
      } else if (that.formInline.MerchantDetail.Email !== '' && !emailReg.test(that.formInline.MerchantDetail.Email)) {
        that.$message.error('邮箱格式格式错误，请重新输入');
        return false;
      } else if (that.LegalPersonShow === true && that.formInline.MerchantDetail.LegalPerson === '') {
        that.$message.error('企业法人不能为空');
        return false;
      } else if (that.LegalPersonShow === true && that.formInline.MerchantDetail.LegalPerson !== that.formInline.MerchantName) {
        that.$message.error('企业法人应与商户名称一致');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalMobile === '' && that.needFill === true) {
        that.$message.error('负责人手机号不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalMobile !== '' && !mobilephoneReg.test(that.formInline.MerchantDetail.PrincipalMobile)) {
        that.$message.error('负责人手机号格式错误');
        return false;
      } else if (that.yanzhengma === true && that.formInline.AuthCode === '') {
        that.$message.error('验证码不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalCertNo === '') {
        that.$message.error('负责人证件号码不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalCertNo !== '' && !idcardReg.test(that.formInline.MerchantDetail.PrincipalCertNo)) {
        that.$message.error('负责人证件号码格式错误');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalPerson === '') {
        that.$message.error('负责人名称不能为空');
        return false;
      } else if (!regRealName.test(that.formInline.MerchantDetail.PrincipalPerson)) {
        that.$message.error('负责人名称输入有误，请重新输入');
        return false;
      } else if (that.formInline.MerchantDetail.PrincipalCertVld === '' & that.BussAuthNumShow === true) {
        that.$message.error('负责人身份证件有效期不能为空');
        return false;
      } else if (that.formInline.MerchantDetail.ShareholderCertNo === '' & that.BussAuthNumShow === true) {
        that.$message.error('控股股东身份证件号码不能为空');
        return false;
      } else if (!idcardReg.test(that.formInline.MerchantDetail.ShareholderCertNo) & that.BussAuthNumShow === true) {
        that.$message.error('控股股东身份证件号码格式错误');
        return false;
      } else if (that.formInline.MerchantDetail.ShareholderName === '' & that.BussAuthNumShow === true) {
        that.$message.error('控股股东姓名不能为空');
        return false;
      } else if (!regRealName.test(that.formInline.MerchantDetail.ShareholderName === '') & that.BussAuthNumShow === true) {
        that.$message.error('控股股东姓名输入有误，请重新输入');
        return false;
      } else if (that.formInline.MerchantDetail.ShareholderCertVld === '' & that.BussAuthNumShow === true) {
        that.$message.error('控股股东身份证件有效期不能为空');
        return false;
      }
      if (that.formInline.MerchantType === '01' || that.formInline.MerchantType === '02') {
        if (that.formInline.MerchantName.indexOf('酒店') > -1 || that.formInline.MerchantName.indexOf('公司') > -1) {
          that.$message.error('当商户类型是自然人或者个体工商户时商户名称中不能带有公司，酒店这类字眼');
          return false;
        }
      }
      if (this.stepsActive === 1) {
        console.log(that.contactAdress);
        // 交易类型数组转换为字符串，逗号隔开
        that.formInline.TradeTypeList = that.aTradeTypeList.join(',');
        // 支付渠道数组转换为字符串，逗号隔开
        that.formInline.PayChannelList = that.aPayChannelList.join(',');
        // 禁用支付方式数组转换为字符串，逗号隔开
        that.formInline.DeniedPayToolList = that.aDeniedPayToolList.join(',');
        console.log(that.formInline.TradeTypeList);
        console.log(that.formInline.MerchantDetail.PrincipalMobile);
        // 跳转下一步
        that.stepsActive = this.stepsActive + 1;
        return true;
      } else if (this.stepsActive === 2) {
        // 第二步的验证
        if (that.img1 === '') {
          that.$message.error('身份证正面照不能为空');
          return false;
        } else if (that.img2 === '') {
          that.$message.error('身份证反面照不能为空');
          return false;
        } else if (that.img3 === '' && that.BussAuthNumShow === true) {
          that.$message.error('营业执照图片不能为空');
          return false;
        } else if (that.img4 === '' && that.formInline.MerchantType === '03') {
          that.$message.error('组织机构代码证图片不能为空');
          return false;
        } else if (that.img5 === '' && that.formInline.MerchantType === '03') {
          that.$message.error('开户许可证照片不能为空');
          return false;
        } else if (that.img6 === '' && that.formInline.MerchantType === '03') {
          that.$message.error('门头照不能为空');
          return false;
        } else if (that.img6 === '' && that.formInline.MerchantType === '02') {
          that.$message.error('门头照不能为空');
          return false;
        } else if (that.img9 === '' && that.formInline.MerchantType === '03') {
          that.$message.error('门店内景照片不能为空');
          return false;
        } else if (that.img9 === '' && that.formInline.MerchantType === '02') {
          that.$message.error('门店内景照片不能为空');
          return false;
        } else if (that.img12 === '' && that.img09 === '' && that.img06 === '' && that.formInline.MerchantType === '01') {
          that.$message.error('商户类型为自然人时门头照+内景照、租赁协议二选一，必填一个');
          return false;
        } else if (that.img09 !== '' && that.img06 === '' && that.formInline.MerchantType === '01') {
          that.$message.error('商户类型为自然人时上传了门头照必须上传门店内景照');
          return false;
        } else if (that.img09 === '' && that.img06 !== '' && that.formInline.MerchantType === '01') {
          that.$message.error('商户类型为自然人时上传了门店内景照必须上传门头照');
          return false;
        } else if (that.formInline.MerchantDetail.BussAuthNum === '' && that.BussAuthNumShow === true) {
          that.$message.error('工商注册号不能为空');
          return false;
        } else if (that.formInline.MerchantDetail.BussAuthNum !== '' && that.BussAuthNumShow === true && !businessNoReg.test(that.formInline.MerchantDetail.BussAuthNum)) {
          that.$message.error('工商注册号格式不正确,为15位或者18位');
          return false;
        } else if (that.formInline.FeeParamList[0].FeeType === '') {
          that.$message.error('支付宝费用类型不能为空');
          return false;
        } else if (that.FeeValueAlipay === '') {
          that.$message.error('支付宝费率不能为空');
          return false;
        } else if (!nubReg.test(that.FeeValueAlipay)) {
          that.$message.error('输入支付宝费率格式错误，只能输入数字和小数点最多能输入两位');
          return false;
        } else if (that.FeeValueWeixin === '') {
          that.$message.error('微信费率不能为空');
          return false;
        } else if (!nubReg.test(that.FeeValueWeixin)) {
          that.$message.error('输入微信费率格式错误，只能输入数字和小数点最多能输入两位');
          return false;
        } else if (that.bankCardShow === true && that.formInline.BankCardParam.BankCardNo === '') {
          that.$message.error('银行卡号不能为空');
          return false;
        } else if (that.bankCardShow === true && that.formInline.BankCardParam.BankCardNo !== '' && !bankNo.test(that.formInline.BankCardParam.BankCardNo)) {
          that.$message.error('银行卡号格式不正确，请输入正确的银行卡号');
          return false;
        } else if (that.bankCardShow === true && that.formInline.BankCardParam.BankCertName === '') {
          that.$message.error('银行账户户名不能为空');
          return false;
        } else if (that.LegalPersonShow === true && that.formInline.MerchantDetail.LegalPerson !== that.formInline.BankCardParam.BankCertName) {
          that.$message.error('银行账户户名应与企业法人一致');
          return false;
        } else if (that.bankCardShow === true && that.formInline.BankCardParam.BankCertName !== '' && !regRealName.test(that.formInline.BankCardParam.BankCertName)) {
          that.$message.error('银行账户户名不正确，请输入正确的账户户名');
          return false;
        } else if (that.bankCardShow === true && that.formInline.BankCardParam.AccountType === '') {
          that.$message.error('账户类型不能为空');
          return false;
        } else if (that.state4 === '') {
          that.$message.error('开户支行名称不能为空');
          return false;
        } else if (that.cardType === true && that.bankCardShow === true && that.formInline.BankCardParam.CertNo === '') {
          that.$message.error('持卡人证件号码不能为空');
          return false;
        } else if (that.cardType === true && that.bankCardShow === true && !idcardReg.test(that.formInline.BankCardParam.CertNo)) {
          that.$message.error('持卡人证件号码格式不正确');
          return false;
        } else if (that.cardType === true && that.bankCardShow === true && that.formInline.BankCardParam.CertType === '') {
          that.$message.error('持卡人证件类型不能为空');
          return false;
        } else if (that.cardType === true && that.bankCardShow === true && that.formInline.BankCardParam.CardHolderAddress === '') {
          that.$message.error('持卡人地址不能为空');
          return false;
        } else if (that.bankCardContainShow === true && that.bankPcity === '') {
          that.$message.error('开户支行所在不能为空');
          return false;
        }
        // 如果为对公账户则
        if (that.formInline.BankCardParam.AccountType === '02') {
          // 清空银行卡账户类型
          that.formInline.BankCardParam.CertType = '';
          // 清空银行卡账户名
          that.formInline.BankCardParam.BranchName = '';
          // 获取正确的联行号
          that.formInline.BankCardParam.ContactLine = that.ContactLine;
        } else {
          that.formInline.BankCardParam.CertType = '01';
          // 获取银行卡账户名
          that.formInline.BankCardParam.BranchName = that.formInline.BankCardParam.BranchName;
          // 清空的联行号
          that.formInline.BankCardParam.ContactLine = '';
        }
        // 如果商户类型不是自然人，则自然人需要填写的数据清空
        if (that.MerchantType === '02' || that.MerchantType === '03') {
          that.formInline.MerchantDetail.PersonSex = '';
          that.formInline.MerchantDetail.PersonProfession = '';
          that.formInline.MerchantDetail.PersonCertVld = '';
          that.img12 = '';
        }
        if (that.MerchantType === '01') {
          that.formInline.MerchantDetail.TaxNum = '';
          that.formInline.MerchantDetail.BussAuthVld = '';
          that.formInline.MerchantDetail.ShareholderName = '';
          that.formInline.MerchantDetail.ShareholderCertType = '';
          that.formInline.MerchantDetail.ShareholderCertNo = '';
          that.formInline.MerchantDetail.ShareholderCertVld = '';
          that.formInline.MerchantDetail.PrincipalCertVld = '';
          that.img3 = '';
          that.img4 = '';
          that.img5 = '';
          that.formInline.MerchantDetail.BussAuthNum = '';
        }
        // 如果对应的内容是隐藏状态则清空数据
        if (that.LegalPersonShow === false) {
          that.formInline.MerchantDetail.LegalPerson = '';
        } else if (that.yanzhengma === false) {
          that.formInline.AuthCode = '';
        } else if (that.SubscribeAppIdShow === false) {
          that.formInline.MerchantDetail.SubscribeAppId = '';
        } else if (that.BussAuthNumShow === false) {
          that.img3 = '';
          that.img4 = '';
          that.img5 = '';
          that.formInline.MerchantDetail.BussAuthNum = '';
        } else if (that.bankCardShow === false) {
          that.formInline.BankCardParam.BankCardNo = '';
          that.formInline.BankCardParam.BankCertName = '';
          that.formInline.BankCardParam.AccountType = '';
        } else if (that.cardType === false && that.bankCardShow === false) {
          that.formInline.BankCardParam.CertType = '';
          that.formInline.BankCardParam.CertNo = '';
          that.formInline.BankCardParam.CardHolderAddress = '';
        } else if (that.bankCardContainShow === false) {
          that.bankPcity = '';
        }
        this.formInline.FeeParamList[0].ChannelType = '01';
        this.formInline.FeeParamList[1].ChannelType = '02';
        console.log(that.contactAdress);
        console.log(this.formInline.BankCardParam.BranchName);
        // 获取商户地址
        that.formInline.MerchantDetail.Province = that.contactAdress[0];
        that.formInline.MerchantDetail.City = that.contactAdress[1];
        that.formInline.MerchantDetail.District = that.contactAdress[2];
        if (that.bankCardContainShow === true) {
          // 开户行所在省市
          that.formInline.BankCardParam.BranchProvince = that.bankPcity[0];
          that.formInline.BankCardParam.BranchCity = that.bankPcity[1];
        }
        // 如果支付宝费率显示
        if (that.alipayFee === true) {
          // 获取计算好的支付宝费率
          that.formInline.FeeParamList[0].FeeValue = that.FeeValueAlipay / 1000;
        } else {
          that.formInline.FeeParamList[0].FeeValue = '';
        }
        if (that.weixinFee === true) {
          // 获取计算好的微信费率
          that.formInline.FeeParamList[1].FeeValue = that.FeeValueWeixin / 1000;
        } else {
          that.formInline.FeeParamList[1].FeeValue = '';
        }
        console.log(that.formInline.MerchantDetail.Province);
        console.log(that.formInline.MerchantDetail.City);
        console.log(that.formInline.MerchantDetail.District);
        // 如果商户选择为自然人，则工商注册号为空
        if (that.formInline.MerchantType === '01') {
          that.formInline.MerchantDetail.BussAuthNum = '';
        }
        // 跳转下一步
        that.stepsActive = this.stepsActive + 1;
      } else {
        let that = this;
        that.loadingAll = true;
        // 网商银行商户入驻接口请求
        http.post(api.shoppingunit, that.formInline, (res) => {
          console.log(res);
          if (res.code === '10001') {
            that.$message.success(res.msg);
            console.log(777);
            this.$router.push({
              path: '/internet-bank-list',
              query: {
              }
            });
            that.loadingAll = false;
            return false;
          } else {
            that.loadingAll = false;
            if (res.data[0].RespInfo.ResultMsg !== undefined || res.data[0].RespInfo.ResultMsg !== '') {
              that.$message.error(res.data[0].RespInfo.ResultMsg);
              console.log(res.data[0].RespInfo.ResultMsg);
            } else {
              that.$message.error(res.msg);
            }
          }
        }, (err) => {
          that.loadingAll = false;
          console.log(err);
          that.$message.error('网络异常，请稍后再试');
        });
      }
    },
    back () {
      if (this.stepsActive > 1) {
        this.stepsActive = this.stepsActive - 1;
      };
    },
    // 发送短信验证码
    getCode () {
      let that = this;
      if (that.SMSSendClick === true) {
        return false;
      }
      // 手机号码格式规范
      var mobilephoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (that.formInline.MerchantDetail.PrincipalMobile === '') {
        that.$message.error('手机号不能为空');
        return false;
      } else if (!mobilephoneReg.test(that.formInline.MerchantDetail.PrincipalMobile)) {
        that.$message.error('手机号格式不正确');
        return false;
      }
      // 初始化60s
      var second = 60;
      http.post(api.bankSendmsg, {
        biz_type: '04',
        mobile: that.formInline.MerchantDetail.PrincipalMobile
      }, (res) => {
        console.log(res);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 发送验证码不能点击状态, 倒计时60s, 否则可以点击, 恢复为发送验证码，清除定时器
          that.SMSSendClick = true;
          that.$message.success('短信发送成功，请注意查收');
          var time = setInterval(function () {
            if (second > 0) {
              that.txtusersend = '剩余' + second + '秒';
              second--;
              console.log(that.txtusersend);
            } else {
              that.SMSSendClick = false;
              that.txtusersend = '发送验证码';
              // 清除定时器
              clearInterval(time);
            }
          }, 1000);
          return false;
        };
        that.$message.error(res.msg);
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
      return true;
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem
  margin-top: 15px
  margin-bottom: 12px
  box-sizing: border-box
  background: #fff
  .step
    margin: 55px 0;
    width: 700px;
    display: inline-block
    .step-title
      border-left: 5px solid #36ADCB
      padding-left: 5px
      font-size: 16px
      margin-bottom: 15px;
  .line
    border-top: 1px solid #ABABAB;
  .next-btn
    padding-top: 25px
.formLineBorder
  position: relative
  margin-left:10px
  .bigerInput
    width: 250px;
  .xsInput
    width: 100px
    text-align: center
    margin-left: 10px
  .small-input
    width:202px
  .starFill
    position: absolute;
    top: 12px;
    left: -10px;
    color: #f00
    font-size: 14px
  .form-item
    display: block
    .img-path
      width: 125px
      height: 39px
      position: absolute
      top: 0
      left: 0
      cursor: pointer
    .send-btn
      width:111px
    .show-img
      opacity: 1
    .hide
      opacity: 0
    .btn-no-bg
      background: none
    .passwordInput
      width: 400px
.rows
  width:100%
  margin-bottom: 10px    
  .images
    position:relative
    border: 1px solid #ababab;
    height: 160px;
    width: 120px;
    margin-bottom:15px
    text-align: center;
    .addimg
      margin: 50px auto 15px
      display: inline-block
      width: 30px
      height: 30px
    .imgshow
      position: absolute
      top: 0
      left: 0
      width: 122px
      height: 162px
    .avatar-uploader
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      cursor: pointer
      overflow: hidden
      opacity:0
    .show
      width:120px;
      height:160px;
      background:rgba(0,0,0,.3);
      top:0px;
      position:absolute;
      opacity: 0;
      display: block;
      font-size: 12px;
      transition: 0.3s;
      -webkit-transition: .2s;
      -moz-transition: .2s;
      .look
        color:#fff
        font-size:14px
        text-decoration:underline
        height:135px
        line-height:135px
        cursor:pointer
      .again
        color:#008AFA
        font-size:12px
        text-decoration:underline
        height:25px
        line-height:25px
        background:rgba(255,255,255,.3)
        cursor:pointer          
  .images:hover
    .show
      opacity: 1;
    .text-contain
      width: 122px;
  .mb20
    margin-bottom: 20px
</style>
